<template>
    <ych-modal
      :fullscreen="dialogSize === 'full'"
      :size="dialogSize === 'default' ? 'middle' : dialogSize"
      :visible="visible"
      :title="$t('m.system.datalog.other.dataCompare')"
      @ok="handleOk"
      :okText="$t('m.system.datalog.other.okText')"
      @cancel="handleCancel"
      :cancelText="$t('m.common.button.close')">

    <a-table
      bordered
      rowKey="code"
      :columns="columns"
      :dataSource="dataSource"
      :loading="loading"
      :scroll="{ y: 500 }"
      :pagination="false">

      <span slot="fieldSlot" slot-scope="text,record">
            <span style="color:#1890ff;" v-if="record.name">
              {{text}}({{record.name}})
            </span>
            <span style="color:#1890ff;" v-else>
              {{text}}
            </span>

      </span>
      <span slot="dataVersionTitle1"> {{$t('m.system.datalog.entity.dataVersion')}}:{{dataVersion1Num}}</span>
      <span slot="dataVersionTitle2"> {{$t('m.system.datalog.entity.dataVersion')}}:{{dataVersion2Num}}</span>
      <template slot="avatarslot" slot-scope="text, record">
        <ych-icon v-if="record.dataVersion1 != record.dataVersion2" type="icon-buchong"/>
      </template>
    </a-table>
  </ych-modal>

</template>


<script>

  import { getAction } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'DataLogCompareModal',
    data () {
      return {
        dialogSize: 'default',
        modalWidth: 1200,
        modaltoggleFlag: true,
        confirmDirty: false,
        title: this.$t('m.common.label.operate'),
        visible: false,
        model: {},
        confirmLoading: false,
        headers: {},
        //版本号
        dataVersion1Num: '',
        dataVersion2Num: '',
        //表头
        columns: [
          {
            title: this.$t('m.system.datalog.entity.code'),
            align: 'left',
            dataIndex: 'code',
            width: '30%',
            scopedSlots: { customRender: 'fieldSlot' },
          }, {
            align: 'left',
            dataIndex: 'dataVersion1',
            width: '35%',
            slots: { title: 'dataVersionTitle1' },
          }, {
            align: 'left',
            dataIndex: 'dataVersion2',
            width: '35%',
            slots: { title: 'dataVersionTitle2' },
          }
        ],
        //数据集
        dataSource: [],
        loading: false,
        url: {
          queryCompareUrl: YchConstant.PREFIX_SYSTEM + '/dataLog/queryCompareList',
        },
      }
    },
    created () {

    },
    methods: {
      loadData (dataId1, dataId2) {
        this.dataSource = []
        let that = this
        getAction(that.url.queryCompareUrl, { dataId1: dataId1, dataId2: dataId2 }).then((res) => {
          if (res.success) {
            that.dataVersion1Num = res.result[0].dataVersion
            that.dataVersion2Num = res.result[1].dataVersion
            let json1 = JSON.parse(res.result[0].dataContent)
            let json2 = JSON.parse(res.result[1].dataContent)
            let dataNameJson1 = {}
            if(res.result[0].dataName){
              dataNameJson1 = JSON.parse(res.result[0].dataName)
            }
            for (let item1 in json1) {
              for (let item2 in json2) {
                if (item1 == item2) {
                  if(json1[item1] != json2[item2] ){
                    // //console.log("=========item1=",json1[item1])
                    // //console.log("=========item2=",json2[item2])
                    this.dataSource.push({
                      code: item1,
                      name:dataNameJson1[item1],
                      dataVersion1: json1[item1],
                      dataVersion2: json2[item2],
                    })
                  }
                }
              }
            }
          } else {
            //console.log(res.message)
          }
        })
      },
      compareModal (dataId1, dataId2) {
        this.visible = true
        this.loadData(dataId1, dataId2)
      },
      handleOk () {
        this.close()
      },
      handleCancel(){
        this.close()
      },
      modalFormOk () {
      },
      close () {
        this.$emit('close')
        this.visible = false
        this.disableSubmit = false
      }
    }
  }
</script>
<style less scoped>
</style>
